<script setup>
import axios from 'axios';
import { onMounted } from 'vue';

onMounted(() => {

  // 发送 GET 请求
  axios.get('https://api.example.com/items')
    .then(response => {
      console.log(response.data); // 处理响应数据
    })
    .catch(error => {
      console.error('Error fetching data:', error); // 处理错误
    });

  // 发生Post请求 自动转为JSON格式
  const item = {
    title: 'New Item',
    description: 'Description of the new item'
  };
  axios.post('https://api.example.com/items', item)
    .then(response => {
      console.log('Item created:', response.data); // 处理响应数据
    })
    .catch(error => {
      console.error('Error creating item:', error); // 处理错误
    });

  //结合 async/await
  fetchData();


  //请求体编码  key=value&key=value
  const data = new URLSearchParams();
  data.append('key1', 'value1');
  data.append('key2', 'value2');

  axios.post('https://api.example.com/endpoint', data, {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  })

  //Multipart请求
  const formData = new FormData();
  formData.append('username', 'exampleUser');// 添加文本字段
  // 添加文件，这里的 fileInput 是一个指向文件输入元素的引用
  const fileInput = document.querySelector('input[type="file"]');
  if (fileInput.files[0]) {
    formData.append('profilePicture', fileInput.files[0]);
  }
  axios.post('https://api.example.com/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })

})
async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log(response.data); // 处理响应数据
  } catch (error) {
    console.error('Error fetching data:', error); // 处理错误
  }
}


</script>

<template>
</template>

<style scoped></style>
